<template>
    <div>
        <the-header></the-header>
        <the-aside></the-aside>
        <div class="content-box" :class="{'content-collapse':collapse}">
            <router-view></router-view>
        </div>
    </div>
</template>


<script>
    import TheHeader from './TheHeader.vue'
    import TheAside from './TheAside.vue'
    export default {
        data () {
            return {
                collapse: false
            }
        },
        components: {
            TheHeader,
            TheAside
        },
        created () {
            this.$bus.$on('collapse',() => {
            this.collapse = !this.collapse 
        })
        }
    }
</script>


<style scoped lang="less">
    .content-box{
        position: absolute;
        top: 70px;
        left: 135px;
        bottom: 0;
        right: 0;
        background: #D2D8DC;
        transition: left .3s ease-in-out;
        
    }
    .content-collapse{
        left:70px;
        transition: right .1s ease-in-out;
    }
</style>